<script setup lang="ts">
import {allowFilePass} from "@/utils";
import {ElMessage} from "element-plus";
import {uploadFileCommon} from "@/api";
import type {ReactiveVariable} from "vue/macros";
import {getJobNames, joinUs} from "@/api/about/job";

const resumeUploadList = ref([])
const annexUploadList = ref([])
const showFormState = ref(false)
const initForm = {
  name: '',
  post: '',
  phone: '',
  resume: '',
  attachments: '',
}
const allowSubmit = ref(true)
let jobForm = ref({
  name: '',
  post: '',
  phone: '',
  resume: '',
  attachments: '',
})
const jobTemp = ref('')
// 提交信息
const submitFormHandle = () => {
  if (!allowSubmit.value) {
    return
  }
  allowSubmit.value = false
  if(!jobForm.value.name){
    ElMessage({
      message: "请输入姓名",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if(!jobForm.value.resume){
    ElMessage({
      message: "请上传简历",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(jobForm.value.phone)){
    ElMessage({
      message: "联系电话格式有误",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  let {name,post,phone,resume,attachments} = jobForm.value
  let form = {
    name,
    post,
    phone,
    resume,
    attachments
  }
  joinUs(form)
      .then(res => {
        if (res.code === 200) {
          ElMessage({
            message: "提交成功",
            type: "success",
            duration: 3000
          });
          closeForm()
        } else {
          allowSubmit.value = true
        }
      })
      .catch((e) => {
        // console.log(e)
        allowSubmit.value = true
      })
      .finally(()=>{
        // console.log('finally')
        allowSubmit.value = true
      })

}
const showForm = (post: string) => {
  document.body.style.overflow = 'hidden'
  showFormState.value = true
  jobTemp.value = post
  getJobNameList()
}
const jobNameList = ref([])
const getJobNameList = async () => {
  const {data} = await getJobNames()
  data.filter((i: { postName: string; id: string; }) => {
    if (i.postName === jobTemp.value) {
      jobForm.value.post = i.id
    }
  })
  jobNameList.value = data
}

const closeForm = () => {
  document.body.style.overflow = ''
  showFormState.value = false
  reset()
}
const reset = () => {
  resumeUploadList.value = []
  annexUploadList.value = []
  jobForm.value = Object.assign({}, initForm)
  allowSubmit.value = true
}
// 简介选择文件回调
const resumeUploadHandle = (event: { target: { files: string | any[]; }; }) => {
  const len = event.target.files.length
  if (!len) return
  let list = []
  let fileList: File[] = []
  for (let i = 0; i < len; i++) {
    let fileName = event.target.files[i].name
    if (allowFilePass(fileName)) {
      list.push(fileName)
    } else {
      ElMessage({
        message: '不支持的文件: ' + fileName,
        type: "warning",
        duration: 3500
      });
      list = []
      fileList = []
      break;
    }
    fileList.push(event.target.files[i])
  }
  // @ts-ignore
  resumeUploadList.value = list
//   上传文件
  uploadFile(fileList, 'resume')
}
// 附件选择文件回调
const annexUploadHandle = (event: { target: { files: string | any[]; }; }) => {
  const len = event.target.files.length
  if (!len) return
  let list = []
  let fileList = []
  for (let i = 0; i < len; i++) {
    let fileName = event.target.files[i].name
    if (allowFilePass(fileName)) {
      list.push(fileName)
    } else {
      ElMessage({
        message: '不支持的文件: ' + fileName,
        type: "warning",
        duration: 3500
      });
      list = []
      fileList = []
      break;
    }
    fileList.push(event.target.files[i])
    uploadFile(fileList, 'attachments')
  }
  // @ts-ignore
  annexUploadList.value = list
}
const uploadFile = (file: File[], targetKey: any) => {
  let form = new FormData()
  // 实际上只有一个
  for (let i = 0; i < file.length; i++) {
    form.append('file', file[i])
  }
  uploadFileCommon(form)
      .then(res => {
        if (res.code === 200) {
          // @ts-ignore
          jobForm.value[targetKey] = res.data['fileName']
        }
      })
}
defineExpose({
  showForm,
})

</script>

<template>
  <div class="dilog" v-if="showFormState">
    <div class="ht-job-form">
      <div class="ht-job-title">加入华途，与我们携手并进</div>
      <div class="ht-job-subtitle">如果你的条件和职位要求相符，我们会及时通知面试</div>
      <div class="ht-job-form-top">
        <div class="ht-job-form-item">
          <div class="label">姓名</div>
          <div class="value">
            <input type="text" placeholder="请输入您的姓名" :maxlength="50" v-model="jobForm.name">
          </div>
        </div>
        <div class="ht-job-form-item">
          <div class="label">电话</div>
          <div class="value">
            <input type="number" placeholder="请输入您的联系电话"  v-model.number="jobForm.phone" :maxlength="11"  >
          </div>
        </div>
        <div class="ht-job-form-item">
          <div class="label">岗位</div>
          <div class="value">
            <div class="input">
              <client-only>
                <el-select
                    placeholder="工作区域"
                    v-model="jobForm.post"
                >
                  <el-option
                      v-for="item in jobNameList"
                      :key="item.id"
                      :label="item.postName"
                      :value="item.id"/>
                </el-select>
              </client-only>
            </div>
          </div>
        </div>
      </div>
      <div class="ht-job-form-bottom">
        <div class="label">上传简历</div>
        <div class="file-uploader">
          <label class="one" for="file-1">
            <div class="no-file" v-if="resumeUploadList.length===0">
              <img src="~/assets/images/about/job/job-file-choose.png" alt="">
              <div>简历</div>
            </div>
            <div class="has-file" v-if="resumeUploadList.length!==0">
              <div v-for="i in resumeUploadList">{{ i }}</div>
            </div>
          </label>
          <label class="two" for="file-2">
            <div class="no-file" v-if="annexUploadList.length===0">
              <img src="~/assets/images/about/job/job-file-choose.png" alt="">
              <div>附件</div>
            </div>
            <div class="has-file" v-if="annexUploadList.length!==0">
              <div v-for="i in annexUploadList">{{ i }}</div>
            </div>
          </label>
          <input type="file" style="display: none" name="resume" id="file-1" ref="resume"
                 @change="resumeUploadHandle">
          <input type="file" style="display: none" name="annex" id="file-2" ref="annex"
                 @change="annexUploadHandle">
        </div>
      </div>
      <div class="submit-form">
        <LearnMore label="立即提交" @click.stop="submitFormHandle"/>
      </div>
      <div class="close-btn" title="关闭" @click="closeForm">
        <img src="~/assets/images/about/job/icon-job-close.png" alt="">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ht-job-form {
  width: 12.11rem;
  height: 8.8rem;
  background: #FFFFFF;
  border-radius: 0.13rem;
  margin-left: 5.95rem;
  margin-top: 1rem;
  padding: 0.1px 1.29rem;

  .ht-job-title {
    text-align: center;
    font-size: 0.35rem;
    font-weight: bold;
    margin-top: 0.75rem;
    margin-bottom: 0.2rem;
  }

  .ht-job-subtitle {
    text-align: center;
    height: 0.26rem;
    font-size: 0.2rem;
    font-weight: 400;
    color: #999999;
  }

  .ht-job-form-top {
    display: flex;

    .ht-job-form-item {
      margin-top: 0.79rem;
      margin-right: 0.25rem;

      &:last-child {
        margin-right: 0;
      }

      .label {
        font-size: 0.2rem;
        font-weight: 500;
        color: #111111;
        line-height: 0.3rem;
        margin-left: 0.25rem;
        margin-bottom: 0.15rem;
      }

      .value {
        font-size: 0.18rem;

        input {
          padding-left: 0.25rem;
          border: 0.01rem solid #E3E3E3;
          outline: none;
          width: 3.01rem;
          height: 0.54rem;
          background: #FFFFFF;
          border-radius: 0.06rem;
          font-size: 0.18rem;
          font-weight: 500;
          color: #111;
        }

        .input {
          ::v-deep(.el-input__wrapper) {
            //border: none;
            padding-left: 0.25rem;
            //border: 0.01rem solid #E3E3E3;
            outline: none;
            width: 3.01rem;
            height: 0.54rem;
            background: #FFFFFF;
            border-radius: 0.06rem;
            font-size: 0.18rem;
            font-weight: 500;
            color: #111;
          }
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
          color: #C7D1EB;
          font-weight: 300;
        }
      }
    }

  }

  .ht-job-form-bottom {
    margin-top: 0.45rem;

    .label {
      font-size: 0.2rem;
      font-weight: 500;
      color: #333333;

      margin-left: 0.25rem;
    }

    .file-uploader {
      margin-top: 0.23rem;
      display: flex;

      > div {
        width: 4.63rem;
        height: 2.36rem;
        background: #FFFFFF;
        border-radius: 0.06rem;
        border: 0.01rem solid #E2E2E2;

      }

      .one, .two {
        width: 4.63rem;
        height: 2.36rem;
        background: #FFFFFF;
        border-radius: 0.06rem;
        border: 0.01rem solid #E2E2E2;
        margin-right: 0.29rem;

        .no-file {
          text-align: center;

          img {
            width: 0.65rem;
            height: 0.65rem;
            margin-top: 0.85rem;
          }

          div {
            //margin-top: 0.18rem;
            font-size: 0.2rem;
            font-weight: 300;
            color: #C7D1EB;
          }
        }

        .has-file {
          padding: 0.3rem;
          font-size: 0.2rem;
          height: 90%;
          overflow-y: scroll;
          overflow-x: hidden;

          &::-webkit-scrollbar {
            display: none;
          }

          div {
            margin-bottom: 0.12rem;
          }
        }
      }

      .two {
        margin-right: 0;
      }
    }
  }

  .submit-form {
    margin-top: 0.76rem;
    margin-left: 3.9rem;
  }

  position: relative;

  .close-btn {
    position: absolute;
    right: 0.88rem;
    top: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.76rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.04rem 0.33rem 0.01rem rgba(46, 106, 255, 0.11);
    border-radius: 1rem;

    img {
      display: block;
      width: 0.24rem;
      height: 0.24rem;
    }
  }
}

.dilog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #00000088;
  z-index: 99;
}

</style>
